<template>
  <div class="login-container">
    <el-row>
      <el-col :span="8" :offset="8">
        <el-card class="login-card">
          <template #header>
            <div class="card-header">
              <span class="title">用户登录</span>
              <el-button type="text" @click="$router.push('/register')">
                注册账号
              </el-button>
            </div>
          </template>
          <el-form 
            ref="loginForm"
            :model="form" 
            :rules="rules"
            @submit.prevent="handleLogin"
            label-position="top">
            <el-form-item label="用户名" prop="username">
              <el-input 
                v-model="form.username" 
                placeholder="请输入用户名"
                prefix-icon="User"
                clearable
                />
            </el-form-item>
            
           <el-form-item label="密码" prop="password">
              <el-input 
                ref="passwordInput"
                v-model="form.password" 
                type="password" 
                placeholder="请输入密码"
                prefix-icon="Lock"
                show-password
                clearable/>
            </el-form-item>

            <div class="form-actions">
              <el-button 
                type="primary" 
                native-type="submit"
                :loading="loading"
                class="login-button">
                登录
              </el-button>
            </div>

            <div class="other-login">
              <div class="divider">
                <span>其他登录方式</span>
              </div>
              <div class="social-login">
                <el-tooltip content="微信登录" placement="top">
                  <el-button circle class="social-icon">
                    <el-icon><svg-icon name="wechat" /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="QQ登录" placement="top">
                  <el-button circle class="social-icon">
                    <el-icon><svg-icon name="qq" /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="企业微信登录" placement="top">
                  <el-button circle class="social-icon">
                    <el-icon><svg-icon name="wecom" /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

export default {
  name: 'Login',
  components: {
    User,
    Lock
  },
  setup() {
    const router = useRouter()
    const loginForm = ref(null)
    const passwordInput = ref(null)
    const loading = ref(false)

    const form = reactive({
      username: '',
      password: ''
    })

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      ]
    }

    const handleLogin = async () => {
      loading.value = true
      try {
        // 模拟登录请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        console.log('登录信息:', form)
        ElMessage.success('登录成功')
        // 跳转到聊天页面
        router.push('/chat')
      } catch (error) {
        ElMessage.error('登录失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    return {
      loginForm,
      passwordInput,
      form,
      loading,
      handleLogin,
      rules
    }
  }
}
</script>

<style scoped>
.login-container {
  margin-top: 60px;
  margin-bottom: 60px;
}

.login-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.form-actions {
  margin-top: 24px;
  text-align: right;
}

.login-button {
  width: 100%;
  padding: 12px 20px;
}

.other-login {
  margin-top: 24px;
}

.divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: #909399;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dcdfe6;
  margin: 0 16px;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.social-icon {
  font-size: 20px;
  color: #606266;
}

.social-icon:hover {
  color: #409EFF;
}
</style> 